<template>
  <div style="margin-left: 10px">
    <strong style="display: inline-block; margin: 0 0 10px; ">文章管理</strong>
    <div class="search">
      <!-- <el-input size="mini" placeholder="请输入搜索内容" style="width:200px"></el-input> -->
      请选择文章类型：
      <el-select v-model="articleKind" size="mini" placeholder="类型">
        <el-option
          v-for="item in kindListArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="searchWords">搜索</el-button> -->
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addArticle">添加文章</el-button>
    </div>
    <addEditArticle
      :addArticleVisible="addArticleVisible"
      :isEdit="isEdit"
      @closeAddEditArticle="closeAddEditArticle"
      ref="addEditDialog"
    ></addEditArticle>
    <!--  文章列表列表[-->
    <div class="bike-list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="名称"></el-table-column>
        <el-table-column prop="kind" label="类别"></el-table-column>
        <el-table-column prop label="文章详情">
          <template slot-scope="scope">
            <!-- <div v-html="scope.row.content"></div> -->
            <el-button size="small" @click="openArticleDetail(scope.row.content)">点击查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="editArticle(scope.row)"></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteArticle(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--通过文章类型【类型】 筛选-->
    <el-dialog
      title="提示"
      :visible.sync="openArticleDetailFlag"
      width="50%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <div v-html="ArticleDetail"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openArticleDetailFlag = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { articleKindList } from "../../../data";
import { getArticles, delArticle } from "../../../api";

import addEditArticle from "../../../components/admin/add-edit-Article/add-edit-Article";

export default {
  name: "articleManage",
  data() {
    return {
      articleKind: articleKindList[0].value,
      kindListArr: articleKindList,

      tableData: [],
      openArticleDetailFlag: false,
      ArticleDetail: "",
      isEdit: false,
      addArticleVisible: false
    };
  },
  watch: {
    articleKind: function(articleKind) {
      window.console.log(articleKind, "val");
      this.getArticleList(articleKind);
    }
  },
  mounted() {
    this.getArticleList(this.articleKind);
  },
  components: {
    addEditArticle
  },
  methods: {
    searchWords() {},
    getArticleList(articleKind = "") {
      getArticles({
        kind: articleKind
      }).then(res => {
        // eslint-disable-next-line no-console
        console.log(res, "getArticles");
        if (res.code === 200) {
          this.tableData = res.result.articleList;
        }
      });
    },
    //    tianjia文章
    addArticle() {
      this.addArticleVisible = true;
    },
    closeAddEditArticle(e) {
      this.addArticleVisible = e;
      this.isEdit = e;
      this.getArticleList();
    },
    editArticle(data) {
      // eslint-disable-next-line no-console
      console.log(data, "editorArticle");
      let editDataObj = JSON.parse(JSON.stringify(data));
      this.isEdit = true;
      this.addArticleVisible = true;
      let { id, title, kind, content } = editDataObj;
      this.$refs.addEditDialog.form = {
        articleId: id,
        title,
        kind,
        content
      };
    },
    deleteArticle(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delArticle({ articleId: id }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: res.data,
                type: "success"
              });
              this.getArticleList();
            } else {
              this.$message({
                message: res.data,
                type: "error"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 文章详情
    openArticleDetail(content) {
      this.openArticleDetailFlag = true;
      this.ArticleDetail = content;
    },
    handleClose() {
      this.openArticleDetailFlag = false;
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.search {
  margin: 0 0 30px;
}

.el-input {
  margin-right: 10px;
}

.el-select {
  width: 150px;
  margin-right: 10px;
}
</style>
